
<template>
    <div class="home_box">
        <div class="home_top">
            <h4>宏烨经纪人</h4>
            <div class=" head_box">
                <img v-if="user !== null"
                    src="https://img1.baidu.com/it/u=2738614934,4015134810&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=6633ba305b579245e8325b29694f2785"
                    alt="" class="hone_head">
                <van-icon v-else class="hone_head" name="contact" />

                <span>{{ user?.name }}</span>
            </div>
        </div>
        <div class="home_con">
            <router-link to="/newhouse" class="con">
                <p class="sum">188</p>
                <p>新房</p>
            </router-link>
            <router-link to="/housetwohand" class="con">
                <p class="sum">188</p>
                <p>二手房</p>
            </router-link>
            <router-link to="/rentahouse" class="con">
                <p class="sum">188</p>
                <p>出租房</p>
            </router-link>
        </div>
        <div class="home_foot">
            <router-link to="/chat" class="link">
                <div class="home_tab"><img src="../../assets/kehuimg/kehu_03.jpg" alt="">
                    <p>消息</p>
                </div>
            </router-link>
            <router-link to="/rent" class="link">
                <div class="home_tab"><img src="../../assets/kehuimg/kehu_07.jpg" alt="">
                    <p>求租</p>
                </div>
            </router-link>
            <router-link to="/Purchase" class="link">
                <div class="home_tab"><img src="../../assets/kehuimg/kehu_07.jpg" alt="">
                    <p>求购</p>
                </div>
            </router-link>
            <router-link to="/circle" class="link">
                <div class="home_tab"><img src="../../assets/kehuimg/kehu_12.jpg" alt="">
                    <p>楼市圈</p>
                </div>
            </router-link>

            <router-link to="/seeding" class="link">
                <div class="home_tab"><img src="../../assets/kehuimg/kehu_13.jpg" alt="">
                    <p>直播</p>
                </div>
            </router-link>
            <router-link to="/group" class="link">
                <div class="home_tab"><img src="../../assets/kehuimg/kehu_14.jpg" alt="">
                    <p>团购</p>
                </div>
            </router-link>
            <router-link to="/leaderboard" class="link">
                <div class="home_tab"><img src="../../assets/kehuimg/kehu_18.jpg" alt="">
                    <p>排行榜</p>
                </div>
            </router-link>
            <router-link to="/stats" class="link">
                <div class="home_tab"><img src="../../assets/kehuimg/kehu_19.jpg" alt="">
                    <p>战绩</p>
                </div>
            </router-link>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const active = ref(0);
const user = ref();
onMounted(() => {
    const obj = JSON.parse(localStorage.getItem('user') as string) || null;
    console.log(obj);
    user.value = obj;
})
</script>

<style scoped lang="scss">
.home_top {
    height: 30vh;
    background-color: #2390F9;
    position: relative;

    h4 {
        font-size: 20px;
        font-weight: 400;
        position: fixed;
        left: 20px;
        height: 50px;
        color: #fff;

    }

    .head_box {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 80px;

        span {
            text-align: center;
            display: inline-block;
            width: 60px;
            line-height: 40px;
            color: #f0f0f0;

        }
    }

    .hone_head {
        background: #FFFFFF;
        width: 60px;
        height: 60px;
        border-radius: 60px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;

    }

}

.link {
    height: 110px;

    p {
        color: rgb(41, 41, 41);
    }
}

.home_con {
    width: 95vw;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 5px #ccc;
    height: 80px;
    margin: 0 auto;
    position: relative;
    top: -20px;
    display: flex;

    .con {
        width: 33%;
        text-align: center;

        .sum {
            font-size: 18px;
            font-weight: bold;
            color: #2390F9;
            height: 10px;

        }

        p {
            color: grey;
        }
    }
}

.home_foot {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    .home_tab {
        width: 33vw;
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        text-align: center;

        img {
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

    }
}
</style>
